<template>
  <div class="carousel">
    <el-carousel :interval="3000" type="card" height="430px">
      <el-carousel-item class="carousel-item-intro">
        <h3>项目介绍</h3>
        <ul>
          <li>基于 Spring Boot、Vue、Element 的 学生课程管理系统</li>
          <li>旨在提供学生选课、选择二课活动，教学管理员对用户、班级、课程等信息进行录入等功能</li>
        </ul>
      </el-carousel-item>
      <el-carousel-item class="carousel-item-func">
        <h3>功能计划</h3>
        <ul>
          <li>✔ 学生管理：添加学生信息，修改学生信息，删除学生信息，查询学生信息</li>
          <li>✔ 教师管理：添加教师信息，修改教师信息，删除教师信息，查询教师信息</li>
          <li>✔ 专业管理：添加专业信息，修改专业信息，删除专业信息，查询专业信息</li>
          <li>✔ 班级管理：添加班级信息，修改班级信息，删除班级信息，查询班级信息</li>
          <li>✔ 宿舍管理：添加宿舍信息，修改宿舍信息，删除宿舍信息，查询宿舍信息</li>
          <li>✔ 考勤管理：添加考勤信息，修改考勤信息，删除考勤信息，查询考勤信息</li>
          <li>✔ 课程管理：添加课程信息，修改课程信息，删除课程信息，查询课程信息</li>
          <li>✔ 二课管理：添加二课信息，修改二课信息，删除二课信息，查询二课信息</li>
          <li>✔ 课程种类：添加课程种类，修改课程种类，删除课程种类，查询课程种类</li>
          <li>✔ 数据监控：定制Druid信息，提供简洁有效的SQL监控</li>
          <li>✔ 后台文档：定制在线文档，提供简洁美观易于交互的RESTful规范API文档</li>
        </ul>
      </el-carousel-item>
      <el-carousel-item class="carousel-item-env">
        <h3>开发环境</h3>
        <ul>
          <li>IDE : idea。      JDK : JDK 8。</li>
          <li>Maven : Maven 3.6.3。   MySQL: MySQL 8.0.19。</li>
          <li>IDE : WebStorm 。    Webpack：webpack 4.x。</li>
          <li>NODE: Node v14.17.1。      NPM : NPM 6.14.13。</li>
        </ul>
        <h3>技术选型</h3>
        <ul>
          <li>核心框架：Spring Boot 2.2.6。  </li>
          <li>视图框架：Spring MVC 5.2.5。   持久层框架：TkMyBatis 2.1.5。</li>
          <li>数据库连接池：Druid 1.1.22。    安全框架：Spring  Security 5.2.2。</li>
          <li>前端框架：Vue.js 2.6.11。       页面组件：Element 2.13.1。</li>
          <li>状态管理：Vuex.js 3.1.3。      数据交互：axios 0.19.2。</li>
        </ul>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'index'
}
</script>

<style scoped lang="scss">
  .carousel{
    width: 1200px;
    margin: 100px auto;
    .carousel-item-intro{
      background-color: #b95e5e;
      border-radius: 20px;
      -moz-border-radius: 15px;
      background-clip: padding-box;
      box-shadow: 0 0 25px #a3b3b965;
      h3{
        font-weight: 200;
        text-align: center;
      }
      ul{
        line-height: 35px;
        li{
          font-weight: 200;
        }
      }
    }
    .carousel-item-func{
      background-color: #52c578;
      border-radius: 20px;
      -moz-border-radius: 15px;
      background-clip: padding-box;
      box-shadow: 0 0 25px #a3b3b965;
      h3{
        font-weight: 200;
        text-align: center;
      }
      ul{
        line-height: 35px;
      }
    }
    .carousel-item-env {
      background-color: #41a7b9;
      -webkit-border-radius: 25px;
      border-radius: 20px;
      -moz-border-radius: 15px;
      background-clip: padding-box;
      box-shadow: 0 0 25px #a3b3b965;
      font-weight: 200;
      h3{
        font-weight: 200;
        text-align: center;
      }
      ul{
        line-height: 35px;
      }
    }
  }

</style>
